import {useIntersectionObserver} from "@vueuse/core";

// 通过插件的方式注册全局指令
// 这样就可以节省main.js的代码。main.js只做初始化的操作，不要有具体的代码逻辑
export const lazyPlugin = {
	install(app){
		app.directive('img-lazy',{
			mounted(el,binding){
				// el：指令绑定到的元素
				// binding：一个对象，其中的value属性是使用指令时传递给指令的值
				// console.log(el, binding.value)
				const {stop} = useIntersectionObserver(
					el,
					([{ isIntersecting }]) => {
						// console.log(isIntersecting)
						if (isIntersecting){
							// img出现在了视口区域
							el.src = binding.value
							stop()
						}
					},
				)
			}
		})
	}
}
